/* ====================================================== 
   Fullwidth List of Split
/* ====================================================== */
$list-split-imagery-gutter: 15px;
$list-split-imagery-text-gutter: 5vw;

.list-split-imagery-container {
	position: relative;
	
	&::after {
		content: '';
		display: block;
		clear: both;
	}
	
	.imagery-background {
		width: 100%;
	}


	.imagery-background img {
		width: 100%;
		display: block;
		height: auto;
	}

	.image-container {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		opacity: 0;
		transition: opacity 300ms cubic-bezier(.694,0,.335,1);
	}

	.image-container.is-loaded {
		opacity: 1;
	}


	.feature-imagery {
		user-select: none;
		position: relative;
		width: 50%;
		float: left;
		
	}
	
	&.is-reversed .feature-imagery {
		float: right;
	}
	.has-drop-shadow{
		box-shadow: 0 1.8vw 4vw -.7vw rgba(0,0,0,.2)
	}
	
	/* Text Area */
	.feature-text {
		word-wrap: break-word;
		box-sizing: border-box;
		width: 50%;
		padding-left: $list-split-imagery-text-gutter;
		padding-right: calc(6.730769230769% + #{$list-split-imagery-gutter}); /* (1352-1170)/1352/2 * 100 */
		float: left;
	}

	&.is-reversed .feature-text {
		float: left;
		padding-right: $list-split-imagery-text-gutter;
		padding-left: calc(6.730769230769% + #{$list-split-imagery-gutter});
	}	
	

	
}

/* New XL container for Bootstrap 3.x */
@media all and (min-width: 1430px) {
	.list-split-imagery-container {
		
		.feature-text {
			padding-right: calc(5.189340813464% + #{$list-split-imagery-gutter}); /* (1426-1278)/1426/2 * 100 */

		}
		
		&.is-reversed .feature-text {
			padding-right: auto;
			padding-left: calc(5.189340813464% + #{$list-split-imagery-gutter});
		}

	}
}

/* New XXL container for Bootstrap 3.x */
@media all and (min-width: 1600px) {

	.list-split-imagery-container {
		.feature-text {
			padding-right: calc(12.992125984252% + #{$list-split-imagery-gutter}); /* (1905-1410)/1905/2 * 100 */
		}
		
		&.is-reversed .feature-text {
			padding-right: auto;
			padding-left: calc(12.992125984252% + #{$list-split-imagery-gutter});
		}

	}
}


@media all and (max-width: 768px) {
	.list-split-imagery-container {
		.feature-imagery {
			width: 100%;
		}	
		
		.feature-text,
		&.is-reversed .feature-text {
			text-align: center;
			width: 100%;
			padding: 0 $list-split-imagery-gutter;
		}
		
	}
	
}

